<template>
  <div class="box">
    <div class="logs-box-letf">
      <div class="logs">仓库出货登记小程序系</div>
      <div class="box-letf">
        <!-- <el-button @click="btnoffs" class="btn" icon="el-icon-menu"></el-button> -->
        <!-- 面包屑 -->
        <!-- <el-breadcrumb separator="/" class="crumbs">
          <el-breadcrumb-item
            id="css"
            @click.native="coltCss(item)"
            v-for="item in tags"
            :key="item.path"
            >{{ item.label }}
          </el-breadcrumb-item>
        </el-breadcrumb> -->
      </div>
    </div>
    <div class="rigth">
      <div class="imgs"><img src="../assets/logo.png" alt="" /></div>
      <div class="text">欢迎您,admin</div>
      <div class="imgs-text">
        <div class="imgs"><img src="../assets/logo.png" alt="" /></div>
        <div class="text">退出登录</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data () {
    return {
      meunPath: "",
    };
  },
  computed: {
    ...mapState({
      tags: state => state.tad.tags
    }),
  },
  created () {

  },
  methods: {
    btnoffs () {
      this.$store.commit('collapesMenu')
    },
    coltCss (item) {
      if (this.$route.path !== item.path) {
        this.$router.push({
          path: item.path,
        });
      }
      var crumbss = document.querySelector('.crumbs')
      if (!crumbss) return
      //拿到所有dom元素
      var c = crumbss.children
      //循环将所有的dom元素的color变成#9c9c9c
      for (var i = 0; i < c.length; i++) {
        let textcon = c[i].querySelector('.el-breadcrumb__inner').textContent.trim()
        // 判断原有的innerHTML等不等于穿过来的innerHTML 等于就
        if (textcon == item.label || textcon == item.name) {
          c[i].querySelector('.el-breadcrumb__inner').style.cssText = 'color:#fff'
        } else {
          c[i].querySelector('.el-breadcrumb__inner').style.color = "#9c9c9c";
        }
      }
    },
  }
};
</script>

<style lang="less" scoped>
.box {
  height: 100%;
  border: none;
  background: #3983fe;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .logs-box-letf {
    display: flex;
    align-items: center;
    .logs {
      font-size: 20px;
      color: #fff;
      padding-left: 20px;
    }
    .box-letf {
      display: flex;
      align-items: center;
      margin-left: 10px;

      .crumbs {
        font-size: 16px;
        margin-left: 20px;

        /deep/.el-breadcrumb__item {
          .el-breadcrumb__inner {
            font-weight: 700;
            cursor: pointer;
            &.is-link {
              color: #ee0303;

              &:hover {
                color: #fff !important;
                cursor: pointer;
              }
            }
          }

          &:last-child {
            .el-breadcrumb__inner {
              color: #fff;
            }
          }
        }
      }
    }
  }

  .rigth {
    display: flex;
    align-items: center;
    height: 100%;

    .imgs {
      img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        vertical-align: middle;
      }
    }
    .text {
      font-size: 18px;
      color: #fff;
      margin-left: 10px;
    }
    .imgs-text:hover {
      background: #2c79ff;
    }
    .imgs-text {
      display: flex;
      align-items: center;
      width: fit-content;
      height: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      transition: background-color 0.5s; /* 定义背景色变化的过渡效果 */
      cursor: pointer;
      img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        vertical-align: middle;
        margin-left: 5px;
      }
      .text {
        font-size: 14px;
      }
    }
  }
}
</style>